<template>
  <div class="container">
    <h1>新建房屋租赁信息</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>租赁房屋</span>
        </div>
        <div class="input-right">
          <el-cascader
            v-model="rent_room"
            :options="options1"
            style="width: 300px"
            placeholder="请选择房屋"
            @change="handleChange"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>户主</span>
        </div>
        <div class="input-right">
          <el-input v-model="hold_name" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>租金</span>
        </div>
        <div class="input-right">
          <el-input v-model="rent" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>租赁方式</span>
        </div>
        <div class="input-right">
          <el-radio-group v-model="rent_type">
            <el-radio value="整租">整租</el-radio>
            <el-radio value="合租">合租</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房屋朝向</span>
        </div>
        <div class="input-right">
          <el-select v-model="room_direction" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房屋面积</span>
        </div>
        <div class="input-right">
          <el-input v-model="room_area" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房屋楼层</span>
        </div>
        <div class="input-right">
          <el-input v-model="room_level" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>入住时间</span>
        </div>
        <div class="input-right">
          <el-date-picker
            v-model="live_time"
            style="width: 300px"
            type="date"
            placeholder="选择时间"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房屋设施</span>
        </div>
        <div class="input-right">
          <el-checkbox v-model="fridge" label="冰箱" />
          <el-checkbox v-model="washing_machine" label="洗衣机" />
          <el-checkbox v-model="water_heater" label="热水器" />
          <el-checkbox v-model="bed" label="床" />
          <el-checkbox v-model="closet" label="衣柜" />
          <el-checkbox v-model="intelligent_door_lock" label="智能门锁" />
          <el-checkbox v-model="heating" label="暖气" />
          <el-checkbox v-model="television" label="电视机" />
          <el-checkbox v-model="gas_burner" label="燃气灶" />
          <el-checkbox v-model="broadband" label="宽带" />
          <el-checkbox v-model="sofa" label="沙发" />
          <el-checkbox v-model="kitchen_hood" label="油烟机" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>补充房租信息</span>
        </div>
        <div class="input-right">
          <el-input v-model="supplement_rent" :rows="5" type="textarea" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>手机号码</span>
        </div>
        <div class="input-right">
          <el-input v-model="phone_num" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>微信</span>
        </div>
        <div class="input-right">
          <el-input v-model="wechat" placeholder="请输入" />
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button type="default" @click="to('file/houserent')">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import to from "@/utils/to.js";
import axios from "axios";
import { useRoute } from "vue-router";
import { dayjs, ElMessage } from "element-plus";

const route = useRoute();
const id = route.query.id;

const rent_room = ref("");
const hold_name = ref("");
const rent = ref(0);
const rent_type = ref("");
const room_direction = ref("");
const room_area = ref(0);
const room_level = ref(0);
const live_time = ref("");
const fridge = ref(false);
const washing_machine = ref(false);
const water_heater = ref(false);
const bed = ref(false);
const closet = ref(false);
const intelligent_door_lock = ref(false);
const heating = ref(false);
const television = ref(false);
const gas_burner = ref(false);
const broadband = ref(false);
const sofa = ref(false);
const kitchen_hood = ref(false);
const supplement_rent = ref("");
const phone_num = ref("");
const wechat = ref("");
const floorData = ref([]);

const options1 = ref([]);

const options2 = [
  {
    value: "东",
    label: "东",
  },
  {
    value: "西",
    label: "西",
  },
  {
    value: "南",
    label: "南",
  },
  {
    value: "北",
    label: "北",
  },
];

const getFloor = () => {
  const config = {
    url: "http://localhost:8080/floor/get",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      floorData.value = data.data.data;
      options1.value = floorData.value.map((item) => ({
        value: item.name,
        label: item.name,
        children: Array.from({ length: item.unitNum }, (_, index) => ({
          label: `${index + 1}单元`,
          value: `${index + 1}单元`,
          children: Array.from({ length: 5 }, (_, j) => ({
            label: `${index + 1}0${j + 1}`,
            value: `${index + 1}0${j + 1}`,
          })),
        })),
      }));
    })
    .catch((error) => {
      console.log(error);
    });
};

const addOrUpdate = () => {
  let config = {};

  if (id === undefined || id === "") {
    config = {
      url: "http://localhost:8080/hire/add",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        houseId: Object.values(rent_room.value).join(","),
        owner: hold_name.value,
        hireMoney: rent.value,
        hireStyle: rent_type.value,
        houseToward: room_direction.value,
        houseAreas: room_area.value,
        floorNum: room_level.value,
        hireTime: dayjs(live_time.value).format("YYYY-MM-DD"),
        detail: supplement_rent.value,
        phone: phone_num.value,
        wechat: wechat.value,
        fridge: fridge.value,
        washingMachine: washing_machine.value,
        waterHeater: water_heater.value,
        bed: bed.value,
        closet: closet.value,
        intelligentDoorLock: intelligent_door_lock.value,
        heating: heating.value,
        television: television.value,
        gasBurner: gas_burner.value,
        broadband: broadband.value,
        sofa: sofa.value,
        kitchenHood: kitchen_hood.value,
      },
    };
  } else {
    config = {
      url: "http://localhost:8080/hire/update",
      method: "PUT",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        id: id,
        houseId: Object.values(rent_room.value).join(","),
        owner: hold_name.value,
        hireMoney: rent.value,
        hireStyle: rent_type.value,
        houseToward: room_direction.value,
        houseAreas: room_area.value,
        floorNum: room_level.value,
        hireTime: dayjs(live_time.value).format("YYYY-MM-DD"),
        detail: supplement_rent.value,
        phone: phone_num.value,
        wechat: wechat.value,
        fridge: fridge.value,
        washingMachine: washing_machine.value,
        waterHeater: water_heater.value,
        bed: bed.value,
        closet: closet.value,
        intelligentDoorLock: intelligent_door_lock.value,
        heating: heating.value,
        television: television.value,
        gasBurner: gas_burner.value,
        broadband: broadband.value,
        sofa: sofa.value,
        kitchenHood: kitchen_hood.value,
      },
    };
  }

  const response = axios(config);
  response
    .then((data) => {
      console.log(data);
      if (data.data.code === 1) {
        ElMessage({
          message: data.data.msg,
          type: "success",
        });
        setTimeout(() => {
          to('file/houserent');
        }, 2000);
      } else {
        ElMessage({
          message: data.data.msg,
          type: "error",
        });
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const get = () => {
  const config = {
    url: "http://localhost:8080/hire/selectById",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
    params: {
      id: id,
    },
  };

  const response = axios(config);
  response.then((data) => {
    rent_room.value = data.data.data.houseId.split(",");
    hold_name.value = data.data.data.owner;
    rent.value = data.data.data.hireMoney;
    rent_type.value = data.data.data.hireStyle;
    room_direction.value = data.data.data.houseToward;
    room_area.value = data.data.data.houseAreas;
    room_level.value = data.data.data.floorNum;
    live_time.value = data.data.data.hireTime;
    fridge.value = data.data.data.fridge;
    washing_machine.value = data.data.data.washingMachine;
    water_heater.value = data.data.data.waterHeater;
    bed.value = data.data.data.bed;
    closet.value = data.data.data.closet;
    intelligent_door_lock.value = data.data.data.intelligentDoorLock;
    heating.value = data.data.data.heating;
    television.value = data.data.data.television;
    gas_burner.value = data.data.data.gasBurner;
    broadband.value = data.data.data.broadband;
    sofa.value = data.data.data.sofa;
    kitchen_hood.value = data.data.data.kitchenHood;
    supplement_rent.value = data.data.data.detail;
    phone_num.value = data.data.data.phone;
    wechat.value = data.data.data.wechat;
  });
};

onMounted(() => {
  get();
  getFloor();
});
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 300px;
}

.el-checkbox {
  width: 70px;
}
</style>
